<template>
  <div
    class="ce-history-item"
    :class="statusCss"
  >
    <div
      class="ce-history-item__head"
      :class="statusCss"
    >
      <el-icon
        :class="{ 'is-loading': isProcess }"
        :size="20"
      >
        <ChatDotRound v-if="isInfo" />
        <Loading v-if="isProcess" />
        <CircleCheck v-if="isSuccess" />
        <CircleClose v-if="isDanger"/>
      </el-icon>
      <span class="ce-history-item__label">{{data.message}}</span>
      <span class="ce-history-item__time">{{dateFormat(data.time)}}</span>
    </div>
    <div
      class="ce-history-item__content"
      v-if="isJob"
    >
      <table class="ce-history-item__descriptions">
        <tr>
          <td class="ce-history-item__descriptions-label">任务ID</td>
          <td>{{data.job.id}}</td>
        </tr>
        <tr>
          <td class="ce-history-item__descriptions-label">进程ID</td>
          <td>{{data.job.pid}}</td>
        </tr>
      </table>
      <div
        class="ce-history-item__actions"
        @click="(e) => e.stopPropagation()"
      >
        <el-popconfirm
          confirm-button-type="danger"
          confirm-button-text="确认"
          cancel-button-text="取消"
          title="确认终止任务？"
          v-if="data.type === 'job_start'"
          @confirm="killJob(data.job.id)"
        >
          <template #reference>
            <el-button
              plain
              type="danger"
            >终止任务</el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ceHistoryItem',
}
</script>

<script setup>
import { ChatDotRound, CircleCheck, CircleClose, Loading } from '@element-plus/icons-vue'
import dayjs from 'dayjs';
import { computed, defineProps } from 'vue';

const props = defineProps({
  data: {
    type: Object,
    required: true,
    // default: {
    //   type: 'job_start',  // info, job_start, job_success, job_fail, job_kill
    //   message: '任务执行中...',
    //   time: new Date(),
    //   job: {
    //     id: 'b81802a3-27d3-42f7-8cee-5600798af3ca',
    //     pid: 12345,
    //     startTime: new Date(),
    //     endTime: new Date(),
    //     stdout: '',
    //     stderr: '',
    //     killed: false,
    //     exitCode: 0,
    //   },
    //   config: {
    //     cronTime: '*/10 * * * * *',
    //     command: 'echo',
    //     args: 'Hello ECHO!',
    //     encoding: 'cp936',
    //   }
    // }
  },
})

const isInfo = computed(() => props.data.type === 'info')
const isJob = computed(() => props.data.type.startsWith('job_'))
const isProcess = computed(() => props.data.type === 'job_start')
const isSuccess = computed(() => props.data.type === 'job_success')
const isDanger = computed(() => ['job_fail', 'job_kill'].indexOf(props.data.type) >= 0)

const statusCss = computed(() => {
  switch (props.data.type) {
    case 'job_start':
      return { 'ce-status-process': true }
    case 'job_success':
      return { 'ce-status-success': true }
    case 'job_fail':
    case 'job_kill':
      return { 'ce-status-danger': true }
    default:
      return {}
  }
})

const dateFormat = (date) => dayjs(date).format('YYYY-MM-DD HH:mm:ss')

const killJob = (id) => window.cronApi.killJob(id)
</script>

<style>
.ce-history-item {
  --bg-color: var(--el-bg-color-page);
  --border-color: var(--bg-color);
  padding: 16px 16px;
  background-color: var(--bg-color);
  font-size: var(--el-font-size-base);
  border: var(--border-color) 1px solid;
  border-radius: var(--el-border-radius-base);
  transition: border-color 0.25s;
}
.ce-history-item.ce-status-success {
  --bg-color: #DCE8FF;
}
.ce-history-item.ce-status-danger {
  --bg-color: #FFDFDF;
}
.ce-history-item.ce-status-process {
  --bg-color: #F5F1D1;
}
.ce-history-item:hover.ce-status-success {
  --border-color: #a3b4d4;
}
.ce-history-item:hover.ce-status-danger {
  --border-color: #d3a3a3;
}
.ce-history-item:hover.ce-status-process {
  --border-color: #c5bf8d;
}

.ce-history-item__head {
  display: flex;
  color: var(--el-text-color-primary);
}

.ce-history-item__head.ce-status-success {
  color: #003fb9;
}
.ce-history-item__head.ce-status-danger {
  color: #c50000;
}
.ce-history-item__head.ce-status-process {
  color: #928200
}

.ce-history-item__label {
  margin-left: 4px;
  flex-grow: 1;
}

.ce-history-item__time {
  color: var(--el-text-color-regular)
}

.ce-history-item__content {
  margin-top: 8px;
  display: flex;
  color: var(--el-text-color-regular)
}

.ce-history-item__descriptions {
  flex-grow: 1;
}

.ce-history-item__descriptions-label {
  padding-right: 4px;
  color: var(--el-text-color-primary)
}

.ce-history-item__actions {
  align-self: flex-end;
}
</style>